<template>
  <div class="app-container">
    <el-row :gutter="24" class="mb8">
      <el-col :span="24">
        <el-button style="margin-right: 10px" :type="isChangeTabs?'primary':''" @click="SubjectList()">科目列表</el-button>
        <el-button style="margin-left: 0" :type="isChangeTabs?'':'primary'" @click="StudentList()">考生列表</el-button>
      </el-col>
    </el-row>
    <div v-show="isChangeTabs">
      <subjectList ref="subjectList" :subjectList="subjectList"></subjectList>
    </div>
    <div v-show="!isChangeTabs">
      <studentList ref="studentList" :subjectList="subjectList" :formData="formData"></studentList>
    </div>
  </div>
</template>

<script>
  import subjectList from "@/components/ToolSystem/Draw/subjectList";
  import studentList from "@/components/ToolSystem/Draw/studentList";
  import { getSubjects } from "@/api/toolsystem/draw";
  export default {
    name: "draw",
    components: {subjectList, studentList},
    data() {
      return {
        isChangeTabs: true,
        formData: {
          subjectName: null,
          subjectId: null,// 科目id
          quesId: null,// 题号
        },
        subjectList:[],// 筛选-科目列表
        drawStatus:[] // 筛选-渲染状态列表
      };
    },
    created() {
      this.getSubjectList()
    },
    methods: {
      // 筛选-获取科目列表
      getSubjectList() {
        getSubjects()
          .then(response => {
            console.log(response);
            this.subjectList = response;
          })
          .catch(error => {
            console.log(error);
          });
      },
      SubjectList() {
        this.isChangeTabs = true
        // this.$refs.subjectList.getList();
      },
      StudentList() {
        this.isChangeTabs = false
        // this.$refs.studentList.getList();
      },
    }
  };
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
</style>
